<script setup lang="js">
defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div>
    <div class="card-item">
      <!-- <div class="card-title">系统状态</div> -->
      <div class="card-line">
        <el-card style="width: 400px" shadow="always">
          <span class="title">总数量:</span>
          <div class="content">100</div>
        </el-card>
        <el-card style="width: 400px" shadow="always">
          <span class="title">在用数量:</span>
          <div class="content">50</div>
        </el-card>
        <el-card style="width: 400px" shadow="always">
          <span class="title">库存数量:</span>
          <div class="content">30</div>
        </el-card>
        <el-card style="width: 400px" shadow="always">
          <span class="title">维修数量:</span>
          <div class="content">20</div>
        </el-card>
      </div>
    </div>
    <div class="card-item">
      <div class="card-title">今日动态</div>
      <div class="card-line">
        <el-card style="width: 480px" shadow="always">
          <span class="title">新增:</span>
          <div class="content">10</div>
        </el-card>
        <el-card style="width: 480px" shadow="always">
          <span class="title">归还:</span>
          <div class="content">5</div>
        </el-card>
        <el-card style="width: 480px" shadow="always">
          <span class="title">维修:</span>
          <div class="content">3</div>
        </el-card>
      </div>
    </div>
    <div class="card-item">
      <div class="card-title">提醒通知</div>
      <div class="card-line">
        <el-card style="width: 480px" shadow="always">
          <span class="title">库存:</span>
          <div class="content">55</div>
        </el-card>
        <el-card style="width: 480px" shadow="always">
          <span class="title">超期未归还</span>
          <div class="content">33</div>
        </el-card>
        <el-card style="width: 480px" shadow="always">
          <span class="title">维修到期</span>
          <div class="content">22</div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-item {
  margin-bottom: 50px;
}

.card-title {
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 700;
  color: rgb(221 72 72);
}

.card-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;

  .title {
    font-size: 14px;
  }

  .content {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 700;
  }
}
</style>
